<script setup lang='ts'>
import useStore from '@/store';
import HomePanel from './HomePanel.vue';
import {useLazyDate} from '@/utils/hooks'

const {home} = useStore()
// 数据懒加载
const target = useLazyDate(() => {
  // 发请求
  home.getHotList()
})


</script>

<template>
<div ref="target">
  <HomePanel title="人气推荐" subTitle="人气爆款 不容错过">
    <Transition name="fade">
      <!-- 面板内容 -->
      <ul class="goods-list" v-if="home.newHotList.length > 0">
        <li v-for="item in home.newHotList" :key="item.id">
          <RouterLink :to="'/product/' + item.id">
            <img
              v-lazy="item.picture"
              alt=""
            />
            <p class="name ellipsis">{{item.title}}</p>
            <p class="price">{{item.alt}}</p>
          </RouterLink>
        </li>
      </ul>

      <div class="home-skeleton" v-else>
          <div
            class="item"
            v-for="i in 4"
            :key="i"
            :style="{ backgroundColor: '#f0f9f4' }"
          >
            <XtxSkeleton bg="#e4e4e4" :width="306" :height="306" animated fade />
            <XtxSkeleton bg="#e4e4e4" :width="160" :height="24" animated fade />
            <XtxSkeleton bg="#e4e4e4" :width="120" :height="24" animated fade />
          </div>
      </div>
    </Transition>
  </HomePanel>
</div>
</template>

<style scoped lang="less">
  .fade-enter-active, .fade-leave-active{
    transition: all 3s;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }
</style>

<style scoped lang="less">

.home-skeleton {
  width: 1240px;
  height: 406px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 306px;
    .xtx-skeleton ~ .xtx-skeleton {
      display: block;
      margin: 16px auto 0;
    }
  }
}
</style>

<style scoped lang="less">
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;
    li {
      width: 306px;
      height: 406px;
      background: #fff;
      .hoverShadow();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
      }
      .price {
        color: #999;
        font-size:18px
      }
    }
  }
</style>